<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/4/2
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body onload="loadData()">

<br>
<form class="form-horizontal">

    <div class="form-group">
        <label class="col-md-2" align="right">id：</label>
        <div class="col-md-2">
            <input type="text" id="sysId" class="form-control">
        </div>
        <label class="col-md-2" align="right">用户名：</label>
        <div class="col-md-2">
            <input type="text" id="name" class="form-control">
        </div>
        <input type="button" class="btn btn-success btn-sm" onclick="loadData()" value="查询">
    </div>
</form>
<input type="button" class="btn btn-success btn-sm" onclick="bitDelte()" value="批量删除">
<table class="table">
    <thead>
    <th><input type="checkbox" name="selectId" onclick="quanxuan(this)">全选</th>
    <th onclick="orderBy(this,'sys_id')">id列<span>↑</span></th>
    <th>用户名</th>
    <th>密码</th>
    <th onclick="orderBy(this,'salt')">盐值<span>↑</span></th>
    <th>操作</th>
    </thead>
    <tbody id="tb">

    </tbody>
</table>
<div>
    <button type="button" class="btn btn-success btn-sm" onclick="pres()">上一页</button>
    <button type="button" class="btn btn-success btn-sm" onclick="nexts()">下一页</button>
    一共有<span id="total"></span>数据，共有<span id="totalPage"></span>页
</div>
<%--模态框--%>

<div class="modal fade" id="one" style="top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--头部-->
            <div class="modal-header" style="background-color: green; height: 20px;">
            </div>
            <div class="modal-body">
                <table class="table" border="0">


                    <tr>
                        <td>用户名</td>
                        <input type="hidden" id="sysIdOne">
                        <td><input type="text" id="nameOne"></td>
                    </tr>

                    <tr>
                        <td>密码</td>
                        <td><input type="password" id="pwdOne"></td>
                    </tr>
                    <tr>
                        <td>确认密码</td>
                        <td><input type="password" id="surePwdONe"></td>
                    </tr>
                    <tr>
                        <td><span style="color:red" id="info"></span></td>
                        <td colspan="2">
                            <button type="button" onclick="update()" class="btn btn-success btn-sm">修改</button>
                        </td>

                    </tr>
                </table>
            </div>

        </div>
    </div>
</div>

</body>
<script>
    //默认页面是第一页
    var page = 1;
    var row = 5;
    var totalPage = 0;

    //上一页
    function pres() {
        page--;
        if (page < 1) {
            page = 1;
        }
        loadData();
    }

    //下一页
    function nexts() {
        page++;
        if (page > totalPage) {
            page = totalPage;
        }

        loadData();

    }

    //加载数据
    function loadData() {
        var sysId = $("#sysId").val();
        var name = $("#name").val();
        console.log("sysId=" + sysId);
        console.log("name=" + name);

        $.ajax({
            url: "${pageContext.request.contextPath}/admin/listAjax",
            type: "get",
            data: {"sysId": sysId, "sysName": name, "page": page, "row": row},
            dataType: "json",
            success: function (data) {
                console.log(data);
                console.log(typeof (data.info));
                if (typeof (data.info) == 'string') {
                    alert(data.info);
                    //清空
                    $("#tb").html(data.info);
                } else {
                    //取出总页数
                    totalPage = data.totalPage;
                    //显示总条数
                    $("#total").text(data.total);
                    //显示总页数
                    $("#totalPage").text(totalPage);

                    var html = "";
                    for (var i = 0; i < data.info.length; i++) {
                        html += "<tr>" +
                            "<td><input  type=\"checkbox\" name=\"selectId\" value='" + data.info[i].sysId + "'></td>" +
                            "<td>" + data.info[i].sysId + "</td>" +
                            "<td>" + data.info[i].sysName + "</td>" +
                            "<td>" + data.info[i].sysPwd + "</td>" +
                            "<td>" + data.info[i].salt + "</td>" +
                            "<td>" +
                            "<button type='button' class=\"btn btn-success btn-sm\" onclick='updatePage(this)'>修改</button>" +
                            "<button type='button' class=\"btn btn-success btn-sm\" onclick='updatePageWindow(this)'>弹窗修改</button>" +
                            "<button type='button' class=\"btn btn-success btn-sm\" onclick='deletePage(this)'>删除</button>" +
                            "</td>" +
                            "</tr>";
                    }

                    $("#tb").html(html);
                }


            }
        })
    }

    //打开修改页面
    function updatePage(obj) {
        var id = $(obj).parent().parent().find("td").eq(0).text();
        console.log(id);
        window.location.href = "${pageContext.request.contextPath}/admin/edit?sysId=" + id;
    }

    //打开修改弹窗
    function updatePageWindow(obj) {

        //显示弹窗
        $("#one").modal("show");

        //清空提示信息
        $("#info").text("");

        var id = $(obj).parent().parent().find("td").eq(0).text();
        $("#sysIdOne").val(id);

        var name = $(obj).parent().parent().find("td").eq(1).text();
        $("#nameOne").val(name);

        var pwd = $(obj).parent().parent().find("td").eq(2).text();
        $("#pwdOne").val(pwd);
        $("#surePwdONe").val(pwd);
    }


    //修改
    function update() {
        var sysId = $("#sysIdOne").val();
        var name = $("#nameOne").val();
        var pwd = $("#pwdOne").val();
        var surePwd = $("#surePwdONe").val();
        //判断密码和确认密码是否一致
        if (pwd != surePwd) {
            alert("密码和确认密码不一致");
        } else {
            //ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/editAjax",
                type: "post",
                data: {"sysId": sysId, "sysName": name, "sysPwd": pwd},
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    //alert(data.info);
                    $("#info").text(data.info);
                    if (data.info == "修改成功") {
                        //关闭弹窗
                        $("#one").modal("hide");
                        //刷新
                        loadData();
                    }

                }
            })
        }
    }


    function deletePage(obj) {
        var is = confirm("你确定删除吗");
        if (is) {
            var id = $(obj).parent().parent().find("td").eq(0).text();
            console.log(id);
            //ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/deleteAjax?sysId=" + id,
                type: "get",
                data: {"sysId": id},
                dataType: "json",
                success: function () {
                    console.log(id);
                    loadData();
                }
            })
        }
    }

    //批量删除
    function bitDelte() {
        var arrid = ""
        /*jquery伪类选择*/
        /* $("input[type='checkbox']:checked") 获取所有选中的复选框*/
        $("input[type='checkbox']:checked").each(function () {
            arrid += $(this).val() + ",";
        })
        console.log(arrid);

        var is = confirm("你确定要删除吗");
        if (is) {
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/delAjax",
                type: "get",
                data: {"arrId": arrId},
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data.info == "批量删除成功") {
                        //刷新
                        loadData();
                    }

                }
            })
        }
    }

    //排序
    function orderBy(obj, name) {
        console.log(name);
        var v = $(obj).find("span").text();

        colName = name;
        if (v == "👆") {
            $(obj).find("span").text("👇");
            order = "desc";
        } else {
            $(obj).find("span").text("↑");
            order = "asc";
        }
        loadData();
    }
    //全选
    function quanxuan(obj) {
        //1 获取全选的值
        //  var v = $(obj).prop("checked");
        // console.log(v);
        // $("input[name='selectId']").prop("checked",v);
        $("input[name='selectId']").prop("checked",$(obj).prop("checked"));
    }
</script>
</html>
